<template>
	<view class="homePage">
		<view class="head-back">

		</view>
		<view class="home_head">
			<image @click="showModal=true" class="head_filter" src="/static/new/filter-icon.png" mode=""></image>
			<view class="head_search" @click="toSearch">
				<image class="search_icon" src="/static/new/search-icon.png" mode=""></image>
				<input class="search_input" type="text" placeholder-style="color:#AFABA8" placeholder="请输入关键词搜索"
					value="" />
			</view>
			<view class="head_location">
				<image class="location_icon" src="/static/new/location-icon.png" mode=""></image>
				<text class="location_txt">{{address || ''}}</text>
			</view>
		</view>

		<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
			:duration="duration">
			<swiper-item v-for="(item,index) in bannerData" :key="index" @click="navito(item)">
				<view class="swiper-item">
					<image class="lunboImg" :src="item.image" mode=""></image>
				</view>
			</swiper-item>
		</swiper>

		<view class="announcement">
			<image class="image xtgg" src="/static/new/announcement-img.png" mode="widthFix"></image>
			<uni-notice-bar text="群公告详情.群内容的一个基本介绍,看情况写内容内容内看情况写内容内容内" :speed="100" :scrollable="true"
				background-color="#fff" color="#7A7C7B" />
		</view>

		<!-- <view class="advertise">
			<image class="invite_image" src="/static/new/invite.png" mode="widthFix"></image>
		</view> -->
		<view class="send-members-box">
			<image class="image" :src="$img('/static/2021-08-23/send-members.png')" mode=""></image>
			<image class="go" @tap="go_yaoqing" :src="$img('/static/2021-08-26/go.png')" mode=""></image>
		</view>

		<view class="chooseBar">
			<view :class="activeID == 1? 'purple recommend':'recommend'" @click="chooseActive(1)">
				推荐
			</view>
			<view :class="activeID == 2? 'purple recommend':'recommend'" @click="chooseActive(2)">
				附近
			</view>
		</view>

		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="item.id" @click="toPage(item)">
				<view class="item_head">
					<view class="head_left">
						<image class="head_avatar" :src="item.avatar[0]" mode=""></image>
						<view class="head_content">
							<text class="head_name">{{item.nickname}}</text>
							<view class="head_list">
								<view class="head_item item_age" :class="item.sex==1 ? 'man_sex' : 'woman_sex'">
									<image class="sex_icon"
										:src="item.sex==1 ? '/static/new/woman-icon.png' : '/static/new/1a3c36aa02469d3429dbc22958f6840.png' "
										mode=""></image>
									<text>{{item.age || ''}}</text>
								</view>
								<view class="head_item item_location">{{item.city || ''}}</view>
								<view class="head_item item_distance">{{item.distance || ''}}</view>
							</view>
						</view>
					</view>
					<view class="head_right" @click.stop="onSignUp(item.id)">{{item.invite == 0 ? '报名' : '报名中'}}</view>
				</view>
				<view class="item_content">
					<view class="item_type">
						<image class="type_icon" src="/static/new/type-icon.png" mode=""></image>
						<text>{{item.activity_type_name}}</text>
					</view>
					<view class="content">{{item.content}}</view>
				</view>
				<view class="item_tag">
					<!-- <view class="tag">* -->
					<view class="tag">*<view class="span">{{item.object_value}}</view>
						<view class="line"></view>
						<view class="span">{{item.cost_value}}</view>
						<view class="line"></view>
						<view class="span">{{item.cost_price}}以下</view>*
					</view>
					<!-- *</view> -->
				</view>
				<image v-if="item.image.length>0" @click='preview(item.image)' class="image" :src="item.image[0]"
					mode="widthFix"></image>
			</view>
		</view>

		<view class="modal" v-if="showModal" @click="showModal=false"></view>
		<view class="shaixuanBox" v-if="showModal">
			<view class="shaixuantitle">筛选</view>
			<view class="sexTitle">年龄范围</view>
			<view class="ageBox">
				<input class="sexItem" v-model="age_start" type="number"></input>
				<view class="line"></view>
				<input class="sexItem" v-model="age_end" type="number"></input>
			</view>

			<view class="sexTitle">性别</view>
			<view class="sexBox">
				<view :class="[cursex==3?'curSex':'','sexItem']" @click="chooseSex(3)">全部</view>
				<view :class="[cursex==1?'curSex':'','sexItem']" @click="chooseSex(1)">男</view>
				<view :class="[cursex==2?'curSex':'','sexItem']" @click="chooseSex(2)">女</view>
			</view>

			<view class="sexTitle">距离</view>
			<view class="sexBox">
				<view :class="[distance== ''?'curSex':'','sexItem']" @click="distance = ''">随机</view>
				<view :class="[distance== 'asc'?'curSex':'','sexItem']" @click="distance = 'asc'">由近到远</view>
			</view>
			<!-- <view class="sexTitle">在线状态</view>
			<view class="sexBox" style="justify-content: flex-start;">
				<view class="sexItem curSex" style="margin-right: 3.33%;">全部</view>
				<view>只看在线</view>
			</view> -->
			<view class="btnBox">
				<view class="chongzhiBtn" @click="onReset">重置</view>
				<view class="confirmBtn" @click="confirm">确认</view>
			</view>
			<!-- <view class="sexTitle">在线状态</view>
			<view class="sexBox">
				<view :class="[cursex==3?'curstatu':'','sexItem']">全部</view>
				<view :class="[cursex==1?'curstatu':'','sexItem']">只看在线</view>
			</view> -->
		</view>

		<uni-popup ref="popup" type="center" :maskClick="false">
			<view class="vipPopup">
				<image @click="getVip" class="getVipIcon" src="../../static/pages/toGetVip.png" mode=""></image>
				<image class="closeVipIcon" src="../../static/img/ClosePopup.png" mode=""></image>
			</view>
		</uni-popup>
		<voiceChatModal></voiceChatModal>
		<video-chat></video-chat>
		<uni-popup ref="upPop" :maskClick="false">
			<view class="upPop-cont">
				<view class="title">
					<text>提示</text>
				</view>
				<view class="subtitle">
					<text>发现新版本，去更新？</text>
				</view>
				<view class="btns">
					<view class="btn btn1" v-if="!Qup" @click="closeUpPop">取消</view>
					<view class="btn btn2" @click="goUpUrl">确认</view>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="activePop" :maskClick="false">
			<view class="activePop_content">
				<image class="activePop_image" src="/static/new/activePop-bg.png" mode="widthFix"></image>
				<view class="content">
					<view class="title">参加活动需支付<text style="color: #FF3000;">{{active_margin}}</text>元报名费</view>
					<view class="tips">报名不成功报名费原路退还</view>
					<view class="activePop_btn" @click="activePop_pay">确认支付</view>
				</view>
				<image @click="onCloseActivePop" class="activePop_close" src="/static/new/close.png" mode="widthFix">
				</image>
			</view>
		</uni-popup>

		<pay-pop ref="payPop" @onClick="onClickPay" />
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar.vue'
	import PayPop from '@/components/pay-pop/pay-pop.vue'
	export default {
		components: {
			uniPopup,
			uniNoticeBar,
			PayPop
		},
		data() {
			return {
				list: [],
				typeList: [],
				bannerData: [],
				cursex: 3,
				showModal: false,
				invite: 0,
				page: 1,
				canPagejia: true,
				canPullDownRefresh: false,
				indicatorDots: false,
				autoplay: true,
				interval: 4000,
				duration: 500,
				userInfo: "",
				isNewUserVip: 0,
				activeID: 1,
				latitude: 39.9,
				longitude: 116.4,
				poisdatas: [{}, {}, {}],
				markers: [],
				address: '正在定位...',
				canTabbar: false, //可以点击tabbar刷新
				upInfo: '', //获取的更新信息
				Qup: 0, //是否强制更新
				wxLoginState: 2, //微信登录显示隐藏
				platform: '', //机型ios或android
				age_start: '',
				age_end: '',
				distance: '',
				active_margin: 0,
				activit_id: null
			}
		},
		onLoad() {
			this.page = 1
			this.list = []
			// setTimeout(() => {

			// this.$checkIsVip()
			this.getVipData()
			this.getLocation()
			this.getActiveMargin()
			this.get_pid();
			// }, 300)
		},
		onShow() {
			// this.page = 1
			// this.list = []
			//#ifdef APP-PLUS
			this.checkUp();
			//#endif
			this.getWxLoginState();
			// console.log(this.list, '触发show')
			let curSex = uni.getStorageSync('cursex')
			if (curSex) {
				this.cursex = curSex
			}
			this.getBannerList()
			this.getTypeList()
			this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
			if (!this.userInfo) {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
			setTimeout(() => {
				this.canTabbar = true;
			}, 1000)
		},
		onHide() {
			this.canTabbar = false;
		},
		//下拉刷新
		onPullDownRefresh() {
			this.canPagejia = true
			this.list = []
			this.page = 1
			this.canPullDownRefresh = true
			this.getUserActive()
		},
		onTabItemTap(e) {
			// console.log(e);
			if (e.index == 0 && this.canTabbar) {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 100
				});
				uni.startPullDownRefresh()
			}
		},
		onReachBottom() { //与methods 同级
			if (this.canPagejia) {
				// this.page = this.page + 1
				// this.getData()
				if (this.activeID == 2) {
					this.getActivityCitylist()
				} else {
					this.getData()
				}
			}
		},
		methods: {
			get_pid() {
				// console.log("pid");
				let user = JSON.parse(uni.getStorageSync("userInfo"));
				if (user.pid <= 0 && uni.getStorageSync("pidPass") == false) {
					setTimeout(res => {
						uni.navigateTo({
							url: "../../pageA/invitation-code/invitation-code"
						})
					}, 500)
				}
			},
			activePop_pay() {
				this.onCloseActivePop()
				this.$refs.payPop.open()
			},
			getActiveMargin() {
				this.$utils.request('/api/config/activit_price', {}, res => {
					if (res.code == 200) {
						this.active_margin = res.data
					}
				})
			},
			onCloseActivePop() {
				this.$refs.activePop.close()
			},
			onSignUp(id) {
				this.activit_id = id
				this.$refs.activePop.open()
			},
			onReset() {
				this.cursex = 3
				this.distance = ''
				this.age_end = ''
				this.age_start = ''
			},
			getWxLoginState() {
				this.$utils.request('/api/config/switch', {
					id: 1
				}, res => {
					if (res.code == 200) {
						this.wxLoginState = res.data.config_status;
					}
				})
			},
			// 检测更新
			checkUp() {
				let that = this
				let ver = Number((plus.runtime.version).split('.').join('')); //获取当前版本号
				this.$utils.request("/api/config/app_edition", {}, function(res) {
					if (res.code == 200) {
						that.upInfo = res.data;
						that.platform = uni.getSystemInfoSync().platform;
						// console.log('platform', that.platform)
						if (that.platform == 'ios') {
							// 苹果
							let app = Number(res.data.ios_app_edition.split('.').join(''))
							if (ver < app) {
								if (res.data.ios_is_app > 0) {
									// 强制更新
									uni.hideTabBar();
									that.openUpPop();
									that.Qup = 1;
								} else {
									// 不强制更新
									that.openUpPop();
									that.Qup = 0;
								}
							}
						} else if (that.platform == 'android') {
							// 安卓
							let app = Number(res.data.app_edition.split('.').join(''))
							if (ver < app) {
								if (res.data.is_app > 0) {
									// 强制更新
									uni.hideTabBar();
									that.openUpPop();
									that.Qup = 1;
								} else {
									// 不强制更新
									that.openUpPop();
									that.Qup = 0;
								}
							}
						}
					}
				})
			},
			// 打开更新下载链接
			goUpUrl() {
				if (this.platform == 'ios') {
					// 苹果
					plus.runtime.openURL(this.upInfo.ios_app_url);
				} else if (this.platform == 'android') {
					// 安卓
					plus.runtime.openURL(this.upInfo.app_url);
				}
			},
			// 关闭更新弹窗
			closeUpPop() {
				this.$refs.upPop.close();
			},
			// 打卡更新弹窗
			openUpPop() {
				this.$refs.upPop.open();
			},
			chooseSex(sex) {
				this.cursex = sex
				uni.setStorageSync('cursex', sex)
			},
			getActivityCitylist() {
				// uni.showLoading({
				// 	mask: true
				// })
				let that = this
				let paramData = {
					page: this.page,
					sex: this.cursex,
					longitude: this.longitude,
					latitude: this.latitude
				}
				this.$utils.postrequest("/api/activity_citylist", paramData, function(res) {
					if (res.code == 200) {
						if (res.data.length > 0) {
							res.data.forEach((item, index) => {
								item['invite'] = 0
								item.avatar = JSON.parse(item.avatar)
								item.image = JSON.parse(item.image)
							})
						} else {
							that.canPagejia = false
						}
						if (that.canPullDownRefresh) {
							uni.stopPullDownRefresh(); //停止下拉刷新动画
						}
						setTimeout(() => {
							that.list = that.list.concat(res.data)
							that.page++
							let obj = {}
							that.list = that.list.reduce((cur, next) => {
								obj[next.id] ? "" : obj[next.id] = true && cur.push(next);
								return cur;
							}, [])
							// uni.hideLoading()
						}, 300)
					}
				})
			},
			getLocation() {
				uni.getLocation({
					// map组件默认为国测局坐标gcj02，调用 uni.getLocation返回结果传递给组件时，需指定 type 为 gcj02
					type: 'gcj02',
					geocode: true,
					success: (res => {
						// 定位得到的经纬度
						this.longitude = res.longitude;
						this.latitude = res.latitude;
						// console.log(res)
						let data = {
							longitude: this.longitude,
							latitude: this.latitude
						}
						this.list = []
						this.page = 1
						// this.getData();
						this.getUserActive();
						// console.log(data)
						this.$utils.postrequest('/api/location', data, res => {
							if (res.code == 200) {
								let locationInfo = {
									address: res.data,
									longitude: this.longitude,
									latitude: this.latitude
								}
								uni.setStorageSync('locationInfo', locationInfo)
								this.address = res.data
							} else {
								uni.showToast({
									icon: 'none',
									title: res.message
								})
								this.address = '定位失败'
							}
						})
					}),
					fail(err) {
						// console.log(err);
					}
				});
			},
			chooseActive(id) {
				this.activeID = id;
				this.page = 1;
				this.getUserActive()
			},
			getUserActive() {
				this.canPagejia = true
				if (this.activeID == 2) {
					this.list = []
					this.getActivityCitylist()
				} else {
					this.list = []
					this.getData()
				}
			},
			getVip() {
				this.$utils.postrequest("/api/newUserVipAdd", '', res => {
					if (res.code === 200) {
						uni.showToast({
							icon: "success",
							title: res.message
						})
						this.$refs.popup.close()
					} else if (res.code === 300) {
						uni.showToast({
							icon: "none",
							title: res.message
						})
						this.$refs.popup.close()
					}
				})
			},
			getVipData() {
				this.$utils.postrequest("/api/isNewUserVip", '', res => {
					if (res.code === 200) {
						if (res.data) {
							this.$refs.popup.open()
						}
					} else {
						// console.log(res)
					}
				})
			},
			yaoqing(e) {
				let title = e.activity_type_name;
				let miaoshu = e.content;
				let imgurl = e.image[0];
				let url = e.image[0];
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					href: url,
					title: title,
					summary: miaoshu,
					imageUrl: imgurl,
					success: function(res) {
						uni.showToast({
							title: '已分享',
							duration: 2000
						});
					},
					fail: function(err) {}
				})

				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					href: url,
					title: title,
					summary: miaoshu,
					imageUrl: imgurl,
					success: function(res) {
						uni.showToast({
							title: '已分享',
							duration: 2000
						});
					},
					fail: function(err) {}
				})
			},
			navito(e) {
				if (e.url.includes('https://') || e.url.includes('http://')) {
					window.location.href = e.url
				} else {
					window.location.href = 'https://' + e.url
				}

			},
			yaoqing1(e) {
				// console.log('e', e)
				// return
				let that = this
				// this.invite=1
				let isInvit = false
				that.list.forEach((item, i) => {
					if (e.user_id == item.user_id) {
						// console.log('e.user_id', e.user_id)
						// console.log(item.user_id)
						// uni.showToast({
						// 	title: '邀请成功,等待确认',
						// 	icon: 'none'
						// })
						// item.invite = 1
						if (!isInvit) {
							isInvit = true;
							this.$utils.postrequest("/api/invitation", {
								activity_id: item.id
							}, res => {
								if (res.code === 200) {
									uni.showToast({
										title: '邀请成功,等待确认',
										icon: 'none'
									})
									item.invite = 1
								} else {
									// console.log(res)
								}
							})
						} else {
							item.invite = 1
						}
					}
				})
			},
			go_yaoqing() {
				uni.navigateTo({
					url: "/pageA/fen-xiang/fen-xiang"
				})
			},
			//预览
			preview(urls) {
				// console.log(urls)
				uni.previewImage({
					urls: urls,
					current: 0,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							// console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							// console.log(err.errMsg);
						}
					}
				});
			},
			toPage(item) {
				uni.navigateTo({
					url: '/pages/my/mydongtai?id=' + item.user_id + '&city=' + item.city
				})
			},
			toSearch() {
				uni.navigateTo({
					url: '/pages/index/search'
				})
			},
			scroll() {

			},
			typeChange(id) {
				this.curTypeId = id
				this.getData(id)
			},
			getBannerList() {
				let that = this
				this.$utils.request("/api/banner", {}, function(res) {
					// console.log('res', res)
					if (res.code == 200) {
						if (res.data.length > 0) {
							that.bannerData = res.data
						}
					}
				})
			},
			getTypeList() {
				let that = this
				this.$utils.request("/api/activitytype", {}, function(res) {
					// console.log('res', res)
					if (res.code == 200) {
						if (res.data.length > 0) {
							that.typeList = res.data
							that.typeId = res.data[0].id
							// that.getData('')
							// that.getUserActive()
							// console.log('that.ty', that.typeList)
						}
					}
				})
			},
			confirm() {
				this.showModal = false
				this.getUserActive()
			},
			getData(id) {
				// uni.showLoading({
				// 	mask: true
				// })
				let that = this
				let paramData = {
					page: this.page,
					sex: this.cursex,
					activity_type_id: '',
					longitude: this.longitude,
					latitude: this.latitude,
					age_start: this.age_start,
					age_end: this.age_end,
					distance: this.distance
				}
				this.$utils.postrequest("/api/activitylist", paramData, function(res) {
					if (res.code == 200) {
						if (res.data.length > 0) {
							res.data.forEach((item, index) => {
								item['invite'] = 0
								item.avatar = JSON.parse(item.avatar)
								item.image = JSON.parse(item.image)
							})
						} else {
							that.canPagejia = false
						}
						if (that.canPullDownRefresh) {
							uni.stopPullDownRefresh(); //停止下拉刷新动画
						}
						setTimeout(() => {
							that.list = that.list.concat(res.data)
							that.page++
							// uni.hideLoading()
							let obj = {}
							that.list = that.list.reduce((cur, next) => {
								obj[next.id] ? "" : obj[next.id] = true && cur.push(next);
								return cur;
							}, [])
						}, 300)
					}
				})
			},
			toTask() {
				uni.navigateTo({
					url: '/pages/active/task'
				})
			},
			onClickPay(way) {
				if (way != 4) {
					uni.showToast({
						title: '暂不支持',
						icon: 'none'
					})
					return
				}
				let that = this;
				this.$utils.postrequest('/api/ac_order/pay', {
					way,
					activit_id: this.activit_id
				}, res => {
					if (res.code == 200) {
						uni.showToast({
							title: '支付成功',
							icon: 'none'
						})
						setTimeout(()=>{
							that.onCloseActivePop();
						},0)
						// setTimeout(() => {
						// 	uni.navigateTo({
						// 		url: '/pages/my/activity'
						// 	})
						// }, 2000)
						this.$refs.popup.close()
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.home_head {
		display: flex;
		align-items: center;
		padding: 100rpx 30upx 30rpx 22upx;
		box-sizing: border-box;
		// margin-top: 140upx;
		position: fixed;
		background-color: white;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 5;

		.head_filter {
			width: 56upx;
			height: 53upx;
			margin-right: 9upx;
		}

		.head_search {
			display: flex;
			align-items: center;
			flex: 1;
			height: 72upx;
			background: #F4F5F7;
			border-radius: 36upx;
			padding: 0 30upx;
			box-sizing: border-box;

			.search_icon {
				width: 36upx;
				height: 36upx;
				margin-right: 13upx;
			}

			.search_input {
				font-size: 28upx;
				font-weight: 500;
			}
		}

		.head_location {
			margin-left: 16upx;
			display: flex;
			align-items: center;

			.location_icon {
				width: 32upx;
				height: 42upx;
				margin-right: 9upx;
			}

			.location_txt {
				font-size: 28upx;
				color: #333333;
			}
		}
	}

	.swiper {
		margin-top: 30upx;
		padding: 0 30upx;
		box-sizing: border-box;

		.swiper-item,
		.lunboImg {
			border-radius: 20upx;
			width: 100%;
			height: 271upx;
		}
	}

	.announcement {
		padding: 0 20upx 0 30upx;
		box-sizing: border-box;
		display: flex;
		align-items: center;

		.image {
			width: 226upx;
			height: 70upx;
			margin-right: 2upx;
		}
	}

	.advertise {
		padding: 0 14upx 0 12upx;
		box-sizing: border-box;
		margin-top: 19upx;

		.invite_image {
			width: 100%;
		}
	}

	.chooseBar {
		margin-bottom: 53upx;
		padding: 0 33upx;
		box-sizing: border-box;
		display: flex;
		align-items: center;

		.recommend+.recommend {
			margin-left: 45upx;
		}

		.recommend {
			font-size: 28upx;
			color: #838383;
			position: relative;

			&::after {
				content: '';
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: -11upx;
				width: 22upx;
				height: 9upx;
				background: #FFFFFF;
				border-radius: 5upx;
			}
		}

		.purple {
			font-size: 32upx;
			font-weight: bold;
			color: #393939;

			&::after {
				content: '';
				background: linear-gradient(117deg, #0C97F8, #3FCAFE);
			}
		}
	}

	.list {
		padding: 0 27upx;
		box-sizing: border-box;

		.item {
			margin-bottom: 34upx;
			box-shadow: 0px 0px 13upx 0px rgba(143, 105, 252, 0.14);
			border-radius: 20upx;

			.item_head {
				padding: 29upx 30upx 0 32upx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.head_left {
					display: flex;
					align-items: center;
				}

				.head_avatar {
					width: 110upx;
					height: 110upx;
					border-radius: 50%;
					margin-right: 16upx;
				}

				.head_name {
					font-size: 32upx;
					font-weight: 500;
					color: #1F1C2F;
				}

				.head_list {
					margin-top: 18upx;
					display: flex;
				}

				.head_item {
					display: flex;
					align-items: center;
					height: 34upx;
					padding: 0 15upx;
					border-radius: 17upx;
					box-sizing: border-box;
					font-size: 18upx;
					font-weight: 500;
					color: #FFFFFF;
				}

				.item_age {
					display: flex;
					align-items: center;

					.sex_icon {
						margin-right: 2upx;
						width: 15upx;
						height: 15upx;
					}
				}

				.man_sex {
					background: linear-gradient(-90deg, #5FCAFF, #5B8DFE);
				}

				.woman_sex {
					background: linear-gradient(-90deg, #FC94C2, #FD5FA4);
				}

				.item_location {
					background: linear-gradient(-90deg, #BB89FC, #9A80FF);
					margin: 0 18upx 0 13upx;
				}

				.item_distance {
					background: linear-gradient(-90deg, #63D9D0, #39B7CD);
				}

				.head_right {
					width: 123upx;
					height: 66upx;
					background: linear-gradient(-26deg, #0C97F8, #56C4FC);
					border-radius: 33upx;
					font-size: 28upx;
					color: #FFFFFF;
					text-align: center;
					line-height: 66upx;
				}
			}

			.item_content {
				margin-top: 34upx;
				display: flex;
				align-items: flex-start;
				padding: 0 35upx;
				box-sizing: border-box;

				.item_type {
					min-width: 105upx;
					height: 51upx;
					display: flex;
					align-items: center;
					padding: 0 10upx;
					box-sizing: border-box;
					background-color: rgba(23, 162, 249, 0.14);
					font-size: 26upx;
					font-weight: bold;
					color: #17A2F9;
					white-space: nowrap;

					.type_icon {
						width: 29upx;
						height: 30upx;
						margin-right: 6upx;
					}
				}

				.content {
					padding: 0 8upx 0 18upx;
					box-sizing: border-box;
					font-size: 26upx;
					font-weight: bold;
					color: #2E2C3A;
					line-height: 48upx;
				}
			}

			.item_tag {
				display: flex;
				padding: 0 35upx;
				box-sizing: border-box;
				margin-top: 25upx;
				padding-bottom: 33upx;

				.tag {
					padding: 0 20upx;
					box-sizing: border-box;
					height: 62upx;
					line-height: 62upx;
					background-color: rgba(23, 162, 249, 0.14);
					border-radius: 10upx;
					margin-right: 20upx;
					font-size: 26upx;
					font-weight: bold;
					color: #17A2F9;
					display: flex;
					align-items: center;

					>.span {
						padding: 0 10rpx;
					}

					>.line {
						height: 20rpx;
						width: 1rpx;
						background-color: #17A2F9;
					}

					>.line:nth-last-child(1) {
						display: none;
					}
				}
			}

			.image {
				width: 100%;
			}
		}
	}

	.activePop_content {
		position: relative;
		padding: 0 100upx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;


		.activePop_image {
			width: 100%;
			border-radius: 40upx 40upx 0 0;
		}

		.content {
			background: #FFFFFF;
			width: 100%;
			border-radius: 0 0 40upx 40upx;
			padding: 40upx 45upx 36upx 45upx;
			box-sizing: border-box;

			.title {
				font-size: 32upx;
				font-weight: 800;
				color: #333333;
				text-align: center;
			}

			.tips {
				margin: 41upx 0 47upx 0;
				font-size: 25upx;
				color: #666666;
				line-height: 40upx;
				text-align: center;
			}

			.activePop_btn {
				height: 82upx;
				line-height: 82upx;
				background: #FF9600;
				border-radius: 40upx;
				text-align: center;
				font-size: 32upx;
				color: #FFFFFF;
			}
		}

		.activePop_close {
			position: absolute;
			bottom: -100upx;
			width: 62upx;
			height: 62upx;
			left: 50%;
			transform: translateX(-50%);
		}
	}
</style>

<style lang="scss">
	@import "./index.scss";

	page {
		background: #FFFFFF;
		position: relative;
		width: 100%;
		height: 100%;
	}

	.modal {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.45);
		z-index: 999999;
	}

	.shaixuanBox {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9999999;
		border-radius: 10rpx 10rpx 0 0;
		background: #fff;

		.shaixuantitle {
			text-align: center;
			margin-top: 70rpx;
			margin-bottom: 50rpx;
			font-size: 32rpx;
			color: #211E2E;
		}

		.sexTitle {
			margin-bottom: 35rpx;
			margin-left: 52rpx;
			font-size: 30rpx;

			color: #211E2E;
		}

		.sexBox {
			margin-left: 52rpx;
			margin-right: 52rpx;
			margin-bottom: 57rpx;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-column-gap: 20upx;
		}

		.sexBox view {
			width: 100%;
			border: 1px solid #C7C7CC;
			height: 84rpx;
			border-radius: 3px;
			text-align: center;
			font-size: 24rpx;
			line-height: 84rpx;
		}

		.ageBox {
			display: flex;
			align-items: center;
			margin-left: 52rpx;
			margin-right: 52rpx;
			margin-bottom: 57rpx;
		}

		.ageBox .sexItem {
			width: 200upx;
			height: 84rpx;
			border: 1px solid #C7C7CC;
			border-radius: 3px;
			text-align: center;
			font-size: 24rpx;
			line-height: 84rpx;
		}

		.ageBox .line {
			width: 20upx;
			height: 4upx;
			margin: 0 35upx;
			background-color: #C7C7CC;
		}

		.curSex {
			background: #52b8fa;
			color: #fff !important;
		}

		.btnBox {
			width: 100%;
			display: flex;
			text-align: center;
			line-height: 102rpx;
		}

		.chongzhiBtn {
			box-sizing: border-box;
			flex: auto;
			height: 102rpx;
			background: #FFFFFF;
			border: 1rpx solid #D5D5DC;
			font-size: 24rpx;
			color: #1D1B2A;
		}

		.confirmBtn {
			flex: auto;
			height: 102rpx;
			background: #52b8fa;
			color: #fff;
			font-size: 24rpx;
			font-family: PingFang SC;

			color: #FFFFFF;
		}
	}

	.vipPopup {
		background-image: url(../../static/pages/getNewVip.png);
		width: 576rpx;
		height: 593rpx;
		background-size: cover;
		text-align: center;

		.getVipIcon {
			height: 147rpx;
			width: 147rpx;
			margin-top: 437rpx;
			margin-left: -20rpx;
		}

		.closeVipIcon {
			width: 52rpx;
			height: 51rpx;
			position: absolute;
			bottom: -80rpx;
			left: 255rpx;
		}
	}

	.upPop-cont {
		width: 500rpx;
		height: 400rpx;
		border-radius: 30rpx;
		background: #FFFFFF;
		box-sizing: border-box;
		padding: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		.title {
			font-weight: bold;
		}

		.subtitle {
			margin-top: 60rpx;
			margin-bottom: 60rpx;
		}

		.btns {
			display: flex;
			align-items: center;

			.btn {
				width: 100rpx;
				height: 60rpx;
				border-radius: 30rpx;
				text-align: center;
				line-height: 60rpx;
			}

			.btn1 {
				border: 1px solid #999;
				color: #999;
			}

			.btn2 {
				border: 1px solid #52b8fa;
				color: #52b8fa;
			}

			.btn+.btn {
				margin-left: 120rpx;
			}
		}
	}

	.head-back {
		height: 211rpx;

	}

	.xtgg {
		width: 150rpx !important;
	}
</style>
